<template>
    <div class="list_container">
        <ul  class="goodsList ">

            <!-- 是否为空 -->
            <el-empty v-if="(list.length==0)" style="margin:0 auto" description="暂无商品"></el-empty>

            <!-- 商品表 -->
            <li v-else @click="goodsDetils(item.commodityID)" v-for="(item, index) in list" :key="index" class="goodsList1">
                <img class="goodsImg" :src="item.picture" />
                <div>
                    <div class="goodsSales">
                        <p class="goodsFont">{{ item.name }}</p>
                    </div>
                    <div class="goodsInfo">
                        <p class="redInfo" v-if="item.redinfo">{{ item.redname }}</p>
                        <p class="info" v-if="item.info">{{ item.blackname }}</p>
                    </div>
                    <div class="goodsPriceFrame">
                        <p class="goodsPrice" v-if="item.price"><span style="font-size:10px;">￥</span>{{ item.price }}
                        </p>
                        <p class="info">{{ item.spell }}</p>
                    </div>

                </div>
            </li>

            <div v-if="isMore" class="toMore">
                <el-button @click="pushMore">浏览更多</el-button>
            </div>
        </ul>
        
    </div>
</template>

<script>
import { getAllprotomore } from "@/utils/api/api.js";
export default {
    props: {
        list: {
            type: Array
        },
        isMore: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            goodsData:[]
        }
    },
    methods: {
        goodsDetils(id){
            console.log(id);
            this.$router.push({
                path:'/details',
                query:{
                    goodsId:Number(id)
                }
            })
        },
        pushMore(){
            getAllprotomore().then(resp=>{
                this.list.push(...resp.msg)
            })
        }
    },
    created() {
          this.goodsData=this.$props.list;
 
        },
        updated () {
            
        }
    }
</script>

<style lang="scss" scoped>
.list_container {
    display: flex;
    width: 100%;
    text-align: center;
    justify-content: center;
    // background-color: #f5f5f5;
    // border-top-left-radius: 50px;
    // border-top-right-radius: 50px;

    .goodsList {
        width: 1225px;
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
        justify-content: left;
        box-sizing: border-box;


        .goodsList1 {
            background-color: white;
            // box-sizing: border-box;
            // padding: 10px 10px;
            margin: 10px;
            width: 18%;
            border-radius: 8px;

            .goodsImg {
                width: 100%;
                border-radius: 10px;
            }

            .goodsSales {
                display: flex;
                justify-content: flex-start;

            }

            .goodsSales>img {
                height: 20px;
                margin: 3px 6px 3px 2px;

            }

            .goodsFont {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                font-size: 15px;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                text-align: left;
                margin: 3px;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

            }

            .goodsInfo {
                display: flex;
                justify-content: left;
            }

            .redInfo {
                color: red;
                font-size: 15px;

            }

            .info {
                color: #9c9c9c;
                font-size: 15px;
                margin-left: 10px;
            }

            .goodsPriceFrame {
                display: flex;
                justify-content: left;
                align-items: center;
            }

            .goodsPrice {
                font-size: 20px;
                color: #e02e24;
            }
        }
        .toMore{
            width: 1200px;
            margin: 0 auto;
        }


    }
}
</style>